<template>
  <div class="login">
    <van-nav-bar>
      <template #left>
        <i class="iconfont iconbtn_nav_back iconStyle" @click="goBack"></i>
      </template>
    </van-nav-bar>
    <div class="main">
      <h2>您好，请登录</h2>
    </div>
    <van-form ref="form" @submit="onSubmit">
      <van-field
        v-model="user.mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="rules.mobile"
      >
        <template #left-icon> <i class="iconfont iconbianzu1"></i> </template>
      </van-field>
      <van-field
        v-model="user.code"
        placeholder="请输入验证码"
        :rules="rules.code"
      >
        <template #left-icon>
          <i class="iconfont iconyanzhengma"></i>
        </template>
        <template #button>
          <span class="myStyle" @click="getCode">{{
            isBack ? time + 's后重新获取' : '获取验证码'
          }}</span>
        </template>
      </van-field>
      <div class="agree">
        <p>
          登录即同意<span class="myStyle">《用户使用协议》</span>和<span
            class="myStyle"
            >《隐私协议》</span
          >
        </p>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">
          确定
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar } from 'vant'
import { getCode, sendLogin } from '@/api/login.js'
import { setLocal } from '@/utils/local.js'
Vue.use(NavBar)
export default {
  data () {
    return {
      isBack: false,
      time: 5,
      timeId: null,
      user: {
        mobile: '',
        code: ''
      },
      rules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'onBlur' },
          {
            pattern: /^1[3|4|5|7|8][0-9]{9}$/,
            message: '请输入正确的手机号',
            trigger: 'onBlur'
          }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'onBlur' }]
      }
    }
  },
  created () {},
  methods: {
    getCode () {
      if (this.isBack) {
        return
      }
      this.$refs.form
        .validate('mobile')
        .then(async () => {
          // console.log('成功的数据', res)
          this.isBack = true
          this.timeId = setInterval(() => {
            this.time--
            if (this.time < 0) {
              clearInterval(this.timeId)
              this.isBack = false
              this.time = 5
            }
          }, 1000)
          this.$toast.loading({
            message: '加载中...',
            forbidClick: true,
            duration: 0 // 没有获取完成前一直加载
          })

          const res = await getCode({ mobile: this.user.mobile })
          this.user.code = res.data.data
          this.$toast.success(res.data.data)
        })
        .catch(err => {
          //   console.log('失败的数据', err)
          this.$toast.fail(err.message)
        })
    },
    async onSubmit () {
      this.$toast.loading({
        duration: 0,
        message: '正在登录...'
      })
      try {
        const res = await sendLogin(this.user)
        // console.log(res)
        if (res.data.code === 200) {
          setLocal('token', res.data.data.jwt)
          res.data.data.user.avatar =
            'http://localhost:1337' + res.data.data.user.avatar
          // 将数据保存到vuex中的setUserInfo中
          this.$store.commit('setUserInfo', res.data.data.user)
          this.$toast.clear()
          const redirect = this.$route.query._redirect
          if (redirect) {
            this.$router.push(redirect)
          } else {
            this.$router.push('/my')
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 登录页，返回按钮
    goBack () {
      const redirect = this.$route.query._redirect
      if (redirect) {
        this.$router.go(-1)
      } else {
        this.$router.push('/find')
      }
    }
  }
}
</script>

<style lang="less">
.login {
  font-size: 12px;
  .iconStyle {
    font-size: 44px;
  }
  .van-nav-bar__left {
    padding-left: 0;
  }
  .main {
    h2 {
      margin: 50px 0 62px 15px;
    }
  }
  .agree {
    padding-left: 15px;
    margin-top: 15px;
    margin-bottom: 44px;
  }
  .myStyle {
    color: #00b8d4;
  }
}
</style>
